<template>
  <div style="page-break-inside:avoid;">
    <ReportEcharts :option="option" :imgList="SaO2Img" :id="id" :bigFontFlag="props.bigFontFlag"/>
  </div>
</template>

<script setup lang="ts">
import {toRefs, watch} from 'vue'
import {reactive, getCurrentInstance, ref} from 'vue'

interface saO2Type {
  reportData: any,
  bigFontFlag: boolean
}

const props = defineProps<saO2Type>()

const {proxy} = getCurrentInstance() as any
const echarts = proxy.$echarts

const id = ref(('SaO2Echatrs' + Math.random()).replace(".", ""))

type EChartsOption = echarts.EChartsOption

interface DataType {
  SaO2Img: Array<object>
  option: EChartsOption
}

const data = reactive<DataType>({
  SaO2Img: [
    {
      url: 'maxSaO2.png',
      text: '最高血氧',
      value: '0（%）'
    },
    {
      url: 'lowSaO2.png',
      text: '最低血氧',
      value: '0（%）'
    },
    {
      url: 'avgSaO2.png',
      text: '平均血氧',
      value: '0（%）'
    }
  ],
  option: {
    grid: {
      left: '5%',
      right: '5%',
      bottom: '10%',
      top: '2%',
      containLabel: true
    },
    dataZoom: [
      {
        type: 'inside',
        realtime: true,
        start: 0,
        end: 100,
        show: false
      },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value'
    },
    legend: {
      data: ['血氧'],
      left: 'center',
      top: 'bottom',
      icon: 'rect',
      itemHeight: 8,
      itemWidth: 8,
      textStyle: {
        fontSize: (props.bigFontFlag ? "18px" : "")
      },
    },
    series: [
      {
        name: '血氧',
        data: [], //血氧值
        type: 'line',
        symbol: 'none', //不要折点
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: 'rgba(245, 49, 157, 0)'
            },
            {
              offset: 1,
              color: 'rgba(245, 49, 157, 0.2)'
            }
          ])
        },
        //折线颜色
        lineStyle: {
          color: 'rgba(245, 49, 157, 1)'
        },
        //折点颜色
        itemStyle: {
          color: 'rgba(245, 49, 157, 1)'
        }
      }
    ]
  }
})
const {SaO2Img, option} = toRefs(data)

const setData = (obj: any) => {
  //血氧
  const {abscissa, spO2Axis, highestSpO2, lowestSpO2, avgSpO2} = obj || {}
  SaO2Img.value = [
    {
      url: 'maxSaO2.png',
      text: '最高血氧',
      value: (highestSpO2 ? highestSpO2 : '-') + '%'
    },
    {
      url: 'lowSaO2.png',
      text: '最低血氧',
      value: (lowestSpO2 ? lowestSpO2 : '-') + '%'
    },
    {
      url: 'avgSaO2.png',
      text: '平均血氧',
      value: (avgSpO2 ? avgSpO2 : '-') + '%'
    }
  ]
  option.value.xAxis.data = abscissa || []
  option.value.series[0].data = spO2Axis || []
}

setData(props.reportData);
//监听reportData变化
watch(
  () => props.reportData,
  (newValue) => {
    setData(newValue);
  },
  {
    deep: true
  }
)
</script>
<style scoped lang="less">

</style>
